<template>
	<view class="wrap">
		<view class="title">
			{{activityTitle}}
		</view>
		<view class="content3">
			<slot name="other"></slot>

			<view class="time" v-if="finishTime">
				<acitivity-count-down :timeEnd="finishTime"></acitivity-count-down>
			</view>
		</view>
		<view v-if="bottomTimeShow && finishTime">
			<u-line color="#CECECE" dashed margin="6px 0 0"></u-line>
			<view class="acivity-time">
				活动时间:{{activiyTime}}
			</view>
		</view>

	</view>
</template>

<script>
	import acitivityCountDown from '@/components/countDown/activity-countDown.vue'
	export default {
		name: 'detail-info',
		components: {
			acitivityCountDown
		},
		props: {
			//活动标题
			activityTitle: {
				type: String,
				default: '一键加油 立减20元'
			},
			activiyTime: {
				type: String,
				default: '2020-12-11至2021-01-11'
			},
			//距离活动结束时间
			finishTime: {
				type: String,
				default: null
			},
			bottomTimeShow: {
				type: Boolean,
				default: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		background-color: #fff;
		border-radius: 16upx;
		padding: 28upx;
		display: flex;
		flex-direction: column;

		.title {
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: bold;
			font-size: 34upx;
			margin-bottom: 15upx;
		}

		.content3 {
			display: flex;
			margin: 10upx 0;
			justify-content: space-between;

			.time {
				display: flex;
			}
		}

		.acivity-time {
			color: #232323;
			font-size: 20upx;
			margin: 24upx 0upx 0;
		}
	}
</style>
